<template>
	<div class="container">
		<div class="whole-flex-center-between">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<div class="chartTitle">
						<div class="demo-input-suffix">
							<el-date-picker v-model="selectTime" size="small" unlink-panels type="daterange"
								value-format="timestamp" range-separator="至" start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
							<div v-if="type == 'super'">
								<el-input size="small" placeholder="请输入商户ID" prefix-icon="el-icon-search"
									v-model="merchantID"></el-input>
							</div>
							<div v-else-if="type == 'agent'">
								<el-input size="small" placeholder="请输入商户ID" prefix-icon="el-icon-search"
									v-model="merchantID"></el-input>
							</div>
							<div v-else>
								<el-input size="small" placeholder="请输入商户ID" prefix-icon="el-icon-search"
									v-model="merchantID" :disabled="true"></el-input>
							</div>
						</div>
						<el-button size="mini" @click="query">查询</el-button>
						<el-button size="mini" class="icon-font-size" type="text" @click="clearFilter"
							icon="el-icon-refresh" circle></el-button>
					</div>
				</div>
				<div id="turnoverChart" style="width:1024px;height:300px;"></div>
			</el-card>
		</div>
		<div class="bottom"></div>
	</div>
</template>

<script>
	import Echarts from "echarts";

	export default {
		data() {
			return {
				countInfo: {},
				selectTime: "",
				type: JSON.parse(window.localStorage.userInfo).userType,
				merchantID: JSON.parse(window.localStorage.userInfo).userId,
				route: this.$route,
				agentID: JSON.parse(window.localStorage.userInfo).userId,
				rule: JSON.parse(window.localStorage.userInfo).rule,
			};
		},
		created() {
			if (this.rule == 2) {
				this.merchantID = '';
			}
			this.getTurnoverData();
		},
		methods: {
			clearFilter() {
				this.selectTime = '';
				this.merchantID = '';
				this.getTurnoverData();
			},
			query() {
				this.getTurnoverData();
			},
			getTurnoverData() {
				let _this = this;
				if (JSON.parse(window.localStorage.userInfo).rule == 2) { //代理商
					this.$axios({
						url: "/admin/order/statistical",
						data: {
							agentID: _this.agentID ? _this.agentID : '',
							userID: _this.merchantID ? _this.merchantID : '',
							startTime: _this.selectTime[0] ? _this.selectTime[0] / 1000 : '',
							endTime: _this.selectTime[1] ? _this.selectTime[1] / 1000 : '',
							orderType: 1
						},
						success(res) {
							if (res.data.code === 200) {
								let chartData = res.data.content;
								_this.drawTurnoverChart(chartData);
							} else {
								_this.$confirm(res.data.msg, '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									_this.$router.push("/login");
								}).catch(() => {
									_this.$router.push("/login");
								});
							}
						}
					});
				} else {
					this.$axios({
						url: "/admin/order/statistical",
						data: {
							userID: _this.merchantID ? _this.merchantID : '',
							startTime: _this.selectTime[0] ? _this.selectTime[0] / 1000 : '',
							endTime: _this.selectTime[1] ? _this.selectTime[1] / 1000 : '',
							orderType: 1
						},
						success(res) {
							if (res.data.code === 200) {
								let chartData = res.data.content;
								_this.drawTurnoverChart(chartData);
							} else {
								_this.$confirm(res.data.msg, '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									_this.$router.push("/login");
								}).catch(() => {
									_this.$router.push("/login");
								});
							}
						}
					});
				}

			},
			drawTurnoverChart(data) {
				let myChart = this.$echarts.init(
					document.getElementById("turnoverChart")
				);
				const option = {
					tooltip: {
						show: true,
						trigger: "axis",
						position: function(pt) {
							return [pt[0], "10%"];
						},
					},
					title: {
						left: "center",
						text: "交易统计图",
					},
					toolbox: {
						show: false,
						feature: {
							dataZoom: {
								yAxisIndex: "none",
							},
							restore: {},
							saveAsImage: {},
						},
					},
					xAxis: {
						name: "日期",
						type: "category",
						data: data.data,
						boundaryGap: false,
						axisLabel: {
							interval: 'auto',
							margin: 8,
						},
					},
					yAxis: {
						name: "单位:万",
						type: "value",
						boundaryGap: [0, "30%"],
					},
					series: [{
							name: "交易额",
							type: "line",
							areaStyle: {},
							showSymbol: 'auto',
							data: data.money,
						},
						{
							name: "成交量",
							type: "line",
							areaStyle: {},
							showSymbol: 'auto',
							data: data.count,
						},
					],
				};
				myChart.setOption(option);
			}
		},
	};
</script>
<style scoped>
	.chartTitle {
		display: flex;
	}

	.demo-input-suffix {
		width: 550px;
		display: flex;
		justify-content: space-between;
	}

	.demo-input-suffix /deep/ .el-range-editor--small .el-range-separator {
		width: 25px !important;
	}

	.el-input {
		width: 180px;
		margin-right: 10px;
	}

	.icon-font-size {
		font-size: 15px;
	}

	/* .top > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 30px 0;
  border: 1px solid #666;
  border-radius: 50%;
}
.top span {
  display: block;
  width: 100%;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}
.top i {
  display: block;
  width: 100%;
  font-size: 25px;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
} */
	/* .bottom {
  height: 500px;
  margin: 0 100px 100px;
} */
</style>
